<template>
    <div class="batchdistribution-pop">
        <el-dialog :visible.sync="batchdistribution" @close="ColsePop" width="30%">
            <el-row>
                <el-col :span="24">
                    <span class="batchdistribution-pop-tit">客户分配</span>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <span class="checked-person">已经选择{{selections.length}}位客户</span>
                </el-col>
            </el-row>
            <el-form :inline="true" class="demo-form-inline">
                <el-row>
                    <el-col :span="24">
                        <el-row>
                            <el-col :span="6">
                                <span class="tit">划分方式：</span>
                            </el-col>
                            <el-col :span="18">
                                <el-select
                                    clearable
                                    v-model="deptmodeoptionsValue"
                                    placeholder="请选择"
                                    @change="deptmodeoptionsChange"
                                >
                                    <el-option
                                        v-for="item in deptmodeoptions"
                                        :key="item.index"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-row style="margin-top:5%" v-if="isShowFlag==1||isShowFlag==2">
                            <el-col :span="6">
                                <span class="tit">选择部门：</span>
                            </el-col>
                            <el-col :span="18">
                                <popup-tree-input
                                    :data="deptData"
                                    :props="deptTree"
                                    :prop="deptinputValue"
                                    :currentChangeHandle="handleTreeSelectChange3Add"
                                ></popup-tree-input>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-row style="margin-top:5%" v-if="isShowFlag==2">
                            <el-col :span="6">
                                <span class="tit">人员选择：</span>
                            </el-col>
                            <el-col :span="18">
                                <el-select
                                    clearable
                                    v-model="deptuseroptionValue"
                                    placeholder="请选择"
                                    @change="deptuserchange"
                                >
                                    <el-option
                                        v-for="item in deptuseroption"
                                        :key="item"
                                        :label="item.userName"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="ColsePop">取 消</el-button>
                <el-button
                    type="primary"
                    v-if="isShowFlag==1"
                    @click="batchdistributionsubmitdept"
                >确 定</el-button>
                <el-button
                    type="primary"
                    v-if="isShowFlag==2"
                    @click="batchdistributionsubmituser"
                >确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput";
export default {
    name: "Batchdistribution",
    components: {
        PopupTreeInput
    },
    props: {
        batchdistribution: Boolean,
        selections: Array,
        deptuseroption: Array
    },
    data() {
        return {
            isShowFlag: 0, //0:初始化部门、人员不显示  1:部门显示 2：人员显示
            batchdistribution: false,
            deptmodeoptionsValue: "",
            deptuseroption: [],
            // 划分方式
            deptmodeoptions: [
                {
                    label: "分配至部门",
                    value: "11"
                },
                {
                    label: "分配至个人",
                    value: "9"
                }
            ],
            deptData: [], //部门树
            deptTree: {
                label: "deptName",
                children: "children"
            },
            deptinputValue: ""
        };
    },
    methods: {
        ColsePop: function(val) {
            this.$emit("ColsePop");
        },
        batchdistributionsubmitdept: function() {
            this.$emit("batchdistributionsubmitdept");
        },
        batchdistributionsubmituser: function() {
            this.$emit("batchdistributionsubmituser");
        },
        get_dept_data: function() {
            this.$emit("get_dept_data");
        },
        //划分方式 控制部门人员显示
        deptmodeoptionsChange(value) {
            if (value == 9) {
                this.isShowFlag = 2;
            } else if (value == 11) {
                this.isShowFlag = 1;
            } else {
                this.isShowFlag = 0;
            }
        },
        // 获取部门数据
        get_dept_data() {
            this.$api.dropdown.deptLevel3().then(res => {
                this.tableData = res.departmentInfoList;
                this.deptData = res.departmentInfoList;
                this.date = res.departmentInfoList;
                this.date.forEach(item => {
                    item.text = item.deptName;
                    item.value = item.deptName;
                });
            });
        },
        // 点击部门
        handleTreeSelectChange3Add(data, node) {
            this.deptinputValue = data.deptName;
            // this.deptId = data.id;
            this.deptuseroptionValue = "";
            this.$emit("handleTreeSelectChange3Add", {
                data: data,
                node: node
            });
            // this.get_dept_user();
        }
    },
    mounted() {
        this.get_dept_data();
    }
};
</script>
<style lang='scss' scoped>
.batchdistribution-pop-tit {
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
    color: #303133;
}
.demo-form-inline {
    width: 90%;
    margin: 0 auto;
    .el-dialog__body .el-input {
        width: 93% !important;
    }
    .el-select {
        width: 100% !important;
    }
    .tit {
        display: inline-block;
        margin-top: 10%;
    }
}
</style>



